<template>
	<view>
		<view class="header">
			<view class="fill-height el-flex">
				<view class="header-btn2">
					<image src="../../static/images/tabBar/icon-header-logo.png" mode="widthFix"></image>
				</view>
				<view class="placeholder" @click="toSearchView">
					<view class="app-header-title">
						<view class="ipt-img-box">
							<image src="../../static/images/search_b.png" mode=""></image>
						</view>
						搜索商品名称
					</view>
				</view>
				<view class="share-btn">
					<view class="app-header-item">
						<view class="ipt-img-box el-flex" @click="toUser">
							<image src="../../static/images/tabBar/icon-use.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="nav-wrap">
				<view class="nav el-flex">
					<view class="nav-item" v-for="(item,index) in navList" :key="index" @click="tabIndex=index"
						:class="tabIndex==index?'active':''">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="uni-tab-bar" style="display: block;">
			<swiper class="swiper-box" :style="{height:swiperHeight+'px'}" @change="changeSwiper" :current="tabIndex">
				<swiper-item v-for="(list,index) in navList" :key="index" @touchmove.stop='catchTouchMove'>
					<scroll-view scroll-y="true" class="list-content" :style="{height:swiperHeight+'px'}">
						<view class="content-box">
							<template v-if="list.id==0">
								<recommend></recommend>
							</template>
							<template v-if="list.id==1">
								<smartItem></smartItem>
							</template>
							<template v-if="list.id==2">
								<TvItem></TvItem>
							</template>
							<template v-if="list.id==3">
								<household></household>
							</template>
							<template v-if="list.id==4">
								<notebook></notebook>
							</template>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<script>
	import recommend from '@/components/recommend/recommend.vue'
	import smartItem from '@/components/smart/smart.vue'
	import TvItem from '@/components/TV/TV.vue'
	import household from '@/components/household/household.vue'
	import notebook from '@/components/notebook/notebook.vue'
	export default {
		components: {
			recommend,
			smartItem,
			TvItem,
			household,
			notebook
		},
		options: {
			styleIsolation: 'shared'
		},
		data() {
			return {
				keyword: '',
				swiperHeight: 0,
				tabIndex: 0,
				navList: [{
					name: '推荐',
					id: 0
				}, {
					name: '智能',
					id: 1
				}, {
					name: '电视',
					id: 2
				}, {
					name: '家电',
					id: 3
				}, {
					name: '笔记本',
					id: 4
				}]
			};
		},
		methods: {
			toUser() {
				uni.switchTab({
					url: '/pages/user/user'
				})
			},
			catchTouchMove() {
				return false
			},
			toSearchView() {
				uni.navigateTo({
					url: '/secPage/searchView/searchView'
				})
			},
			changeSwiper(e) {
				this.tabIndex = e.detail.current
			},
			clickTab(e) {
				this.tabIndex = e.index
			},
			getClientHeight() {
				const res = uni.getSystemInfoSync()
				const system = res.platform
				if (system === 'ios') {
					return 44 + res.statusBarHeight
				} else if (system === 'android') {
					return 48 + res.statusBarHeight
				} else {
					return 0
				}
			},

		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.swiperHeight = res.windowHeight - this.getClientHeight()
				}
			})
		}

	}
</script>
<style lang="scss" scoped>
	.header {
		max-width: 720px !important;
		min-width: 350px !important;
		margin: 0 auto;
		background: #f2f2f2;
		z-index: 99;
		box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2);

		line-height: 1.15;

		view {
			line-height: 1.15;
		}

		.fill-height {
			height: 0.84rem;
			display: flex;
			align-items: center;
			flex: 1 1 auto;
			flex-wrap: nowrap;

			.header-btn2 {
				display: block;
				width: 0.6rem;
				margin: 0 0.2rem;

				image {
					width: 85%;
				}
			}

			.share-btn {
				display: flex;
				align-items: center;

				.app-header-item {
					display: block;
					width: 0.6rem;
					margin: 0 0.2rem;

					.ipt-img-box {
						width: 0.6rem;
						height: 0.6rem;

						image {
							width: 0.4rem;
							height: 0.4rem;
						}
					}
				}

			}

			.placeholder {
				box-sizing: border-box;
				flex: 1;
				text-align: center;
				font-size: .3rem;
				height: .625rem;

				.app-header-title {
					display: flex;
					height: 100%;
					justify-content: flex-start;
					align-items: center;
					border: 1px solid #e5e5e5;
					text-align: left;
					width: 100%;
					color: rgba(0, 0, 0, .3);
					background-color: #fff;
					border-radius: 0.04rem;

					.ipt-img-box {
						width: 0.4rem;
						height: 0.4rem;
						margin: 0 0.1rem;

						image {
							width: 0.4rem;
							height: 0.4rem;
						}
					}

				}

			}
		}

		.nav-wrap {
			position: relative;
			overflow: hidden;
			line-height: 1.15;
			z-index: 99;

			view {
				line-height: 1.15;
			}

			.nav {
				overflow-x: auto;
				background: #f2f2f2;
				font-size: .26rem;
				white-space: nowrap;

				.nav-item {
					display: inline-block;
					padding: 0 0.25rem;

					text {
						font-size: .26rem;
						display: inline-block;
						line-height: .55rem;
						border-bottom: 2px solid rgba(237, 91, 0, 0);
					}
				}

				.active {
					text {
						color: rgb(237, 91, 0);
						border-color: rgb(237, 91, 0);
					}

				}
			}
		}
	}

	.content-box {
		padding-top: .52rem;
	}
</style>